window.addEventListener('load', function() {
    //配置
    var config = {
        vx: 4, //小球x轴速度,正为右，负为左
        vy: 4, //小球y轴速度
        height: 2, //小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200, //点个数
        color: "121, 162, 185", //点颜色
        stroke: "130,255,255", //线条颜色
        dist: 6000, //点吸附距离
        e_dist: 20000, //鼠标吸附加速距离
        max_conn: 10 //点到点最大连接数
    }

    //调用
    CanvasParticle(config);


    // 定义变量
    let data = [
        { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
        { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
        { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
    ]
    console.log(data[0])
    data.forEach(function(v, i) {
            // console.log(v)
            // 创建标签
            let liDom = document.createElement('li')
                // console.log(liDom)
            if (i == 0) {
                // 添加属性
                liDom.className = 'defaltli active';
            } else {
                liDom.className = 'defaltli';
            }

            // 添加文本
            liDom.innerHTML = v.times + '次';
            //     // 添加到位置
            rightl.appendChild(liDom)

            let lisl = document.querySelectorAll('#right>li')
            console.log(lisl)

            // v.addEventListener('click', function() {
            //     this.className = 'active';
            // })

        })
        // rightN.innerHTML = data[0].price
        // rightn.innerHTML = data[0].unitPrice

    // 获取元素
    let defaltli = document.querySelectorAll('.defaltli')
    console.log(defaltli)
    defaltli.forEach(function(v, i) {
        // console.log(v)
        v.addEventListener('click', function() {
            rightN.innerHTML = data[i].price;
            rightn.innerHTML = data[i].unitPrice;
            defaltli.forEach(function(u) {
                console.log(u)

                u.classList.remove('active')

            })
            v.classList.add('active')
        })
    })
})